<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        svg {
          position: absolute;
          width: 80vh;
          height: 80vh;
          max-width: 80vw;
          max-height: 80vw;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, 0px);
        }

        * {
          -webkit-font-smoothing: antialiased;
          -webkit-font-feature-settings: "tnum";
          -moz-font-feature-settings: "tnum";
          -ms-font-feature-settings: "tnum";
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          stroke-width: 0;
        }

        body {
          background: #F3F6F7;
        }
        body .f1 {
          fill: #181F22;
        }
        body .f2 {
          fill: #F3F6F7;
        }
        body.frog {
          background: #181F22;
        }
        body.frog .f1 {
          fill: #0EF998;
        }
        body.frog .s1 {
          stroke: #0EF998;
        }
        body.frog .f2 {
          fill: #181F22;
        }
        body.frog .s2 {
          stroke: #181F22;
        }
        body.sol {
          background: #181F22;
        }
        body.sol .f1 {
          fill: #F90E5A;
        }
        body.sol .s1 {
          stroke: #F90E5A;
        }
        body.sol .f2 {
          fill: #181F22;
        }
        body.sol .s2 {
          stroke: #181F22;
        }
        body.wasp {
          background: #181F22;
        }
        body.wasp .f1 {
          fill: #FFF532;
        }
        body.wasp .s1 {
          stroke: #FFF532;
        }
        body.wasp .f2 {
          fill: #181F22;
        }
        body.wasp .s2 {
          stroke: #181F22;
        }
        body.terra {
          background: #E76054;
        }
        body.terra .f1 {
          fill: #ECF1CC;
        }
        body.terra .s1 {
          stroke: #ECF1CC;
        }
        body.terra .f2 {
          fill: #E76054;
        }
        body.terra .s2 {
          stroke: #E76054;
        }
    </style>
</head>

<body>
<svg id="clock" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>
        text { font-family: 'Helvetica Bold', 'Helvetica', sans-serif; font-weight: bold; }
    </style>
</svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js">
</script>
<script>
    var c = Snap("#clock"),
      i;

    var c1 = c.circle(256, 256, 255).addClass("f1");
    var c2 = c.circle(256, 192, 192).addClass("f2");
    var c3 = c.circle(256, 128, 129).addClass("f1");
    var c4 = c.circle(256, 64, 66).addClass("f2");

    var fontOff = 16;
    var fontAttr = { textAnchor: "middle", fontSize: 48 };

    var hourCoord = { x: 256, y: 512 - 256 - 64 + fontOff };
    var hourDisplay = c
      .text(hourCoord.x, hourCoord.y, "06")
      .addClass("f2")
      .attr(fontAttr);
    var hour = c.g(c3, c4, hourDisplay);
    hourCoord.txt = "," + hourCoord.x + "," + hourCoord.y - fontOff;
    hourDisplay.transform("r" + 90 + hourCoord.txt);

    var minuteCoord = { x: 256, y: 512 - 128 - 64 + fontOff };
    var minuteDisplay = c
      .text(minuteCoord.x, minuteCoord.y, "23")
      .addClass("f1")
      .attr(fontAttr);
    var minute = c.g(c2, hour, minuteDisplay);
    minuteCoord.txt = "," + minuteCoord.x + "," + minuteCoord.y - fontOff;
    minuteDisplay.transform("r" + 90 + minuteCoord.txt);

    var secondCoord = { x: 256, y: 512 - 64 + fontOff };
    var secondDisplay = c
      .text(secondCoord.x, secondCoord.y, "48")
      .addClass("f2")
      .attr(fontAttr);
    var second = c.g(c1, minute, secondDisplay);
    secondCoord.txt = "," + secondCoord.x + "," + secondCoord.y - fontOff;
    secondDisplay.transform("r" + 90 + secondCoord.txt);

    // Drawing
    var delta,
      lastSecond,
      last = new Date();
    function draw() {
      var now = new Date();
      delta = (now.getTime() - last.getTime()) / 1000;
      last = now;

      // Get Times
      var h = now.getHours();
      var m = now.getMinutes();
      var s = now.getSeconds();
      var ms = now.getMilliseconds();

      // Progress
      var prog = { ms: ms / 1000 },
        p,
        target;
      prog.s = (s + prog.ms) / 60;
      prog.m = (m + prog.s) / 60;
      prog.h = (h + prog.m) / 12;

      var sa = prog.s * 360;
      var ma = prog.m * 360;
      var ha = prog.h * 360 - ma;
      ma = ma - sa;

      second.transform("r" + sa + ",256,256");
      minute.transform("r" + ma + ",256,192");
      hour.transform("r" + ha + ",256,128");

      window.requestAnimationFrame(draw);

      function updateTimes(s, m, h) {
        function pad(num) {
          var str = num.toString();
          return str.length > 1 ? str : "0" + str;
        }

        secondDisplay.node.innerHTML = pad(s);
        minuteDisplay.node.innerHTML = pad(m);
        hourDisplay.node.innerHTML = pad(h);

        secondDisplay.transform("r" + (s < 30 ? -90 : 90) + secondCoord.txt);
        minuteDisplay.transform("r" + (m < 30 ? -90 : 90) + minuteCoord.txt);
        hourDisplay.transform("r" + (h % 12 < 6 ? -90 : 90) + hourCoord.txt);
      }

      if (s !== lastSecond) {
        updateTimes(s, m, h);
      }
      lastSecond = s;
    }

    draw();
</script>
</html>